<script setup>
import { onMounted, ref, watchEffect } from 'vue'
import useEcharts from '@/hooks/useEcharts.js'
//echarts的 ref属性
const commonEchartsRef = ref()
//接收父组件传来的值
const props = defineProps({
  my_width: { type: String, default: '600px' },
  my_height: { type: String, default: '400px' },
  options: Object
})

onMounted(() => {
  nextTick(() => {
    const { setOptions, resize } = useEcharts(commonEchartsRef.value)
    watchEffect(() => {
      setOptions(props.options)
    })
    window.addEventListener('resize', () => {
      resize()
    })
  })

})
</script>
<template>
  <div ref="commonEchartsRef" :style="{ height:props.my_width,width:props.my_height }">
  </div>
</template>

<style scoped lang='scss'>

</style>
